import React from 'react'
import {
  Divider,
  Card,
  Form,
  Modal,
  Input,
  Table,
  Row,
  Col
} from 'antd';
import moment from 'moment';
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';

const Detail = ({
  item = {},
  ...modalProps
}) => {
  const formItemLayout = {
    labelCol: {
      span: 8
    },
    wrapperCol: {
      span: 14
    }
  };

  const queryParamJson = JSON.parse(item.queryParamJson);

  const columns = [
    {
      title: '参数名称',
      dataIndex: 'testname'
    }, {
      title: '参数展示名称',
      dataIndex: 'displayName'
    }, {
      title: '类型',
      dataIndex: 'type'
    }
  ];

  return (
    <Modal {...modalProps}>
      <div>
        <Row gutter={12} type="flex" justify="space-between">
          <Col span={12}>
            <Card type="inner" title="基础数据">
              <Form>
                <FormItem {...formItemLayout} label="报表名称">
                  <span className="ant-form-text">{item.reportName}</span>
                </FormItem>
                <FormItem {...formItemLayout} label="数据来源系统">
                  <span className="ant-form-text">
                    {item.reportDataFromSys === 0 && "订单管理系统"}
                    {item.reportDataFromSys === 1 && "金蝶K3Cloud"}
                  </span>
                </FormItem>
                <FormItem {...formItemLayout} label="创建时间">
                  <span className="ant-form-text">{moment(item.createTime).format(dateFormat)}</span>
                </FormItem>
                <FormItem {...formItemLayout} label="更新时间">
                  <span className="ant-form-text">{moment(item.updateTime).format(dateFormat)}</span>
                </FormItem>
                <FormItem {...formItemLayout} label="状态">
                  <span className="ant-form-text">{item.enabled
                      ? "禁用"
                      : "启用"}</span>
                </FormItem>
              </Form>
            </Card>
          </Col>
          <Col span={12}>
            <Card type="inner" title="SQL数据">
              <Input.TextArea rows='25' readOnly value={item.reportSql}/> {queryParamJson.length > 0 && (
                <div>
                  <Divider>查询条件</Divider>
                  <Table
                    pagination={false}
                    columns={columns}
                    dataSource={queryParamJson}
                    rowKey={record => record.key}
                    size="small"
                    bordered/>
                </div>
              )}
            </Card>
          </Col>
        </Row>
      </div>
    </Modal>
  )
}

export default Detail
